<template>
  <div class="title-vh">
    <p>{{titleText}}</p>
    <div class="img" :style="`background-image:url(${imgSrc})`" @click="lookDetail"></div>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, onUpdated } from 'vue'
export default {
  name: 'TitleVh',
  props: {
    title: String
  },
  setup(props:{title:string},context:{emit:any}) {
    const state = reactive({
      titleText: props.title ||'快去新建个标题吧',
      imgSrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fe5%2F42%2Ff0%2Fe542f0b7969a01e037138624b082174d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665027290&t=5746098a81ad9ce62925878485823bcc'
    })

    onUpdated(()=>{
      state.titleText = props.title
    })

    function lookDetail() {
      context.emit('lookDetail',state.imgSrc)
    }

    return {
      ...toRefs(state),
      lookDetail
    }
  }

}
</script>

<style lang="scss">
.title-vh {
  width: 100%;
  height: 50px;
  display: flex;
  background: skyblue;
  align-items: center;
  justify-content: space-between;
  p {
    text-align: center;
  }
  .img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
  }
}
</style>